<template>
  <view class="container">
    <!-- 用户卡片 -->
    <view class="user-card">
      <view class="gradient-bg"></view>
      
      <!-- 用户信息 -->
      <view class="user-info">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="info-right">
          <view class="nickname-row">
            <text class="nickname">{{userInfo.nickname}}</text>
            <view class="gender-tag">{{userInfo.gender}}</view>
          </view>
          
          <view class="location-row">
            <!-- 位置图标SVG -->
            <svg class="icon" viewBox="0 0 1024 1024" width="16" height="16">
              <path d="M512 938.666667c-6.4 0-12.8-2.133333-17.066667-6.4-6.4-6.4-161.066667-156.8-241.066666-237.866667C168.533333 610.133333 128 490.666667 128 384c0-211.2 172.8-384 384-384s384 172.8 384 384c0 106.666667-40.533333 226.133333-125.866667 310.4-85.333333 85.333333-234.666667 236.8-241.066666 243.2-4.266667 4.266667-10.666667 6.4-17.066667 6.4z m0-874.666667c-176.533333 0-320 143.466667-320 320 0 89.6 34.133333 192 106.666667 262.4 61.866667 61.866667 168.533333 171.733333 213.333333 217.6 44.8-44.8 153.6-155.733333 213.333333-217.6 74.666667-70.4 106.666667-172.8 106.666667-262.4 0-176.533333-143.466667-320-320-320z" fill="#ffffff"></path>
              <path d="M512 512c-70.4 0-128-57.6-128-128s57.6-128 128-128 128 57.6 128 128-57.6 128-128 128z m0-192c-36.266667 0-64 27.733333-64 64s27.733333 64 64 64 64-27.733333 64-64-27.733333-64-64-64z" fill="#ffffff"></path>
            </svg>
            <text class="location">{{userInfo.location}}</text>
          </view>
          
          <view class="bio">{{userInfo.bio}}</view>
        </view>
        
        <!-- 编辑按钮 -->
        <view class="edit-btn" @tap="editProfile">
          <svg class="edit-icon" viewBox="0 0 1024 1024" width="20" height="20">
            <path d="M862.709333 116.042667a128 128 0 0 1 0 181.013333L458.026667 701.866667l-233.813334 63.146666a42.666667 42.666667 0 0 1-51.84-51.84l63.146667-233.813333 404.693333-404.693333a128 128 0 0 1 181.013334 0l41.472 41.386666z m-45.226666 45.269333l-41.472-41.386667a42.666667 42.666667 0 0 0-60.330667 0L311.466667 524.117333l-38.4 142.08 142.08-38.4 404.224-404.16a42.666667 42.666667 0 0 0 0-60.330666zM810.666667 640a42.666667 42.666667 0 0 1 85.333333 0v256a85.333333 85.333333 0 0 1-85.333333 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333334-85.333333h298.666666a42.666667 42.666667 0 0 1 0 85.333333H170.666667v682.666667h640v-256z" fill="#ffffff"></path>
          </svg>
        </view>
      </view>
      
      <!-- 数据统计 -->
      <view class="stats-row">
        <view class="stat-item">
          <text class="stat-num">{{postCount}}</text>
          <text class="stat-label">动态</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-num">{{facilityCount}}</text>
          <text class="stat-label">设施</text>
        </view>
        <view class="stat-divider"></view>
        <view class="stat-item">
          <text class="stat-num">{{likeCount}}</text>
          <text class="stat-label">获赞</text>
        </view>
      </view>
    </view>
    
    <!-- 功能模块 -->
    <view class="function-list">
      <view class="func-group">
        <view class="func-item" @tap="navigateTo('/pages/mine/history')">
          <view class="func-icon">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M512 981.333333C253.013333 981.333333 42.666667 770.986667 42.666667 512S253.013333 42.666667 512 42.666667s469.333333 210.346667 469.333333 469.333333-210.346667 469.333333-469.333333 469.333333z m0-85.333333c212.096 0 384-171.904 384-384s-171.904-384-384-384-384 171.904-384 384 171.904 384 384 384z" fill="#2196F3"></path>
              <path d="M512 512a42.666667 42.666667 0 0 1-42.666667-42.666667V256a42.666667 42.666667 0 0 1 85.333334 0v213.333333a42.666667 42.666667 0 0 1-42.666667 42.666667z" fill="#2196F3"></path>
              <path d="M682.666667 554.666667H512a42.666667 42.666667 0 0 1 0-85.333334h170.666667a42.666667 42.666667 0 0 1 0 85.333334z" fill="#2196F3"></path>
            </svg>
          </view>
          <view class="func-content">
            <text class="func-title">浏览历史</text>
            <text class="func-desc">查看你的浏览记录</text>
          </view>
          <view class="func-arrow">></view>
        </view>
        
        <view class="func-item" @tap="navigateTo('/pages/mine/favorites')">
          <view class="func-icon">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M484.266667 272.021333l-82.474667-157.354666c-5.973333-11.392-20.224-15.36-30.72-8.789334a24.064 24.064 0 0 0-8.789333 8.789334L279.893333 272.021333l-166.741333 22.869334c-12.458667 1.706667-19.84 14.72-15.413333 26.453333a23.893333 23.893333 0 0 0 7.338666 10.026667l121.173334 111.36-28.416 155.904c-2.133333 11.690667 7.338667 22.826667 19.072 23.04 3.84 0.085333 7.68-0.682667 11.136-2.261334l148.48-73.642666 148.48 73.642666c11.221333 5.546667 24.490667 0.341333 28.16-10.24 1.28-3.669333 1.365333-7.509333 0.426667-11.264l-28.842667-155.904 121.173333-111.36c9.301333-8.533333 9.728-22.826667 1.024-31.872a24.064 24.064 0 0 0-9.386666-6.357333l-169.258667-23.125334z" fill="#FF9800"></path>
              <path d="M859.989333 592.384a24.32 24.32 0 0 0-0.426666-11.52l-28.416-156.16 120.746666-111.104c9.301333-8.533333 9.728-22.826667 1.024-31.872a24.064 24.064 0 0 0-9.386666-6.357333l-166.741334-23.125334-82.048-157.098666c-5.973333-11.392-20.224-15.36-30.72-8.789334a24.064 24.064 0 0 0-8.789333 8.789334l-25.173333 48.810666c131.157333 45.226667 225.28 168.533333 225.28 313.770667 0 53.589333-12.714667 104.234667-35.242667 148.992l23.04 11.52c10.752 5.546667 24.021333 0.341333 27.690667-10.24a21.76 21.76 0 0 0 0-5.034667l-1.706666-11.306666 1.706666 11.306666z" fill="#FF9800"></path>
            </svg>
          </view>
          <view class="func-content">
            <text class="func-title">我的收藏</text>
            <text class="func-desc">查看收藏的设施和文章</text>
          </view>
          <view class="func-arrow">></view>
        </view>
        
        <view class="func-item" @tap="navigateTo('/pages/mine/wallet')">
          <view class="func-icon">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M640 640a42.666667 42.666667 0 1 0 0-85.333333 42.666667 42.666667 0 0 0 0 85.333333z" fill="#4CAF50"></path>
              <path d="M810.666667 298.666667v-42.666667a85.333333 85.333333 0 0 0-85.333334-85.333333H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v512a85.333333 85.333333 0 0 0 85.333333 85.333333h512a85.333333 85.333333 0 0 0 85.333334-85.333333v-42.666667a85.333333 85.333333 0 0 0 42.666666-73.813333v-280.746667a85.333333 85.333333 0 0 0-42.666666-72.106666z m-42.666667 426.666666H213.333333V256h554.666667v42.666667h-42.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v213.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h42.666667v42.666666z m42.666667-85.333333h-128V384h128v256z" fill="#4CAF50"></path>
            </svg>
          </view>
          <view class="func-content">
            <text class="func-title">我的钱包</text>
            <text class="func-desc">查看积分和优惠券</text>
          </view>
          <view class="func-arrow">></view>
        </view>
      </view>
      
      <view class="func-group">
        <view class="func-item" @tap="navigateTo('/pages/mine/settings')">
          <view class="func-icon">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M512 661.333333c-82.346667 0-149.333333-66.986667-149.333333-149.333333s66.986667-149.333333 149.333333-149.333333 149.333333 66.986667 149.333333 149.333333-66.986667 149.333333-149.333333 149.333333z m0-213.333333c-35.413333 0-64 28.586667-64 64s28.586667 64 64 64 64-28.586667 64-64-28.586667-64-64-64z" fill="#607D8B"></path>
              <path d="M512 832c-23.466667 0-46.933333-17.066667-51.2-40.533333l-8.533333-46.933334c-12.8-4.266667-25.6-10.666667-38.4-17.066666l-42.666667 21.333333c-21.333333 10.666667-48 4.266667-61.866667-12.8l-59.733333-59.733333c-17.066667-17.066667-21.333333-42.666667-12.8-61.866667l21.333333-42.666667c-6.4-12.8-12.8-25.6-17.066666-38.4l-46.933334-8.533333c-23.466667-4.266667-40.533333-27.733333-40.533333-51.2v-85.333333c0-23.466667 17.066667-46.933333 40.533333-51.2l46.933334-8.533334c4.266667-12.8 10.666667-25.6 17.066666-38.4l-21.333333-42.666666c-10.666667-21.333333-4.266667-48 12.8-61.866667l59.733333-59.733333c17.066667-17.066667 42.666667-21.333333 61.866667-12.8l42.666667 21.333333c12.8-6.4 25.6-12.8 38.4-17.066667l8.533333-46.933333c4.266667-23.466667 27.733333-40.533333 51.2-40.533333h85.333333c23.466667 0 46.933333 17.066667 51.2 40.533333l8.533334 46.933333c12.8 4.266667 25.6 10.666667 38.4 17.066667l42.666666-21.333333c21.333333-10.666667 48-4.266667 61.866667 12.8l59.733333 59.733333c17.066667 17.066667 21.333333 42.666667 12.8 61.866667l-21.333333 42.666666c6.4 12.8 12.8 25.6 17.066667 38.4l46.933333 8.533334c23.466667 4.266667 40.533333 27.733333 40.533333 51.2v85.333333c0 23.466667-17.066667 46.933333-40.533333 51.2l-46.933333 8.533333c-4.266667 12.8-10.666667 25.6-17.066667 38.4l21.333333 42.666667c10.666667 21.333333 4.266667 48-12.8 61.866667l-59.733333 59.733333c-17.066667 17.066667-42.666667 21.333333-61.866667 12.8l-42.666666-21.333333c-12.8 6.4-25.6 12.8-38.4 17.066666l-8.533334 46.933334c-4.266667 23.466667-27.733333 40.533333-51.2 40.533333h-85.333333z m-119.466667-177.066667c6.4 0 10.666667 2.133333 14.933334 4.266667 17.066667 12.8 36.266667 21.333333 55.466666 27.733333 8.533333 2.133333 14.933333 10.666667 17.066667 19.2l10.666667 64h85.333333l10.666667-64c2.133333-8.533333 8.533333-17.066667 17.066666-19.2 19.2-6.4 38.4-14.933333 55.466667-27.733333 6.4-4.266667 14.933333-6.4 23.466667-2.133333l57.6 29.866666 59.733333-59.733333-29.866667-57.6c-4.266667-8.533333-2.133333-17.066667 2.133334-23.466667 12.8-17.066667 21.333333-36.266667 27.733333-55.466666 2.133333-8.533333 10.666667-14.933333 19.2-17.066667l64-10.666667v-85.333333l-64-10.666667c-8.533333-2.133333-17.066667-8.533333-19.2-17.066666-6.4-19.2-14.933333-38.4-27.733333-55.466667-4.266667-6.4-6.4-14.933333-2.133334-23.466667l29.866667-57.6-59.733333-59.733333-57.6 29.866667c-8.533333 4.266667-17.066667 2.133333-23.466667-2.133334-17.066667-12.8-36.266667-21.333333-55.466667-27.733333-8.533333-2.133333-14.933333-10.666667-17.066666-19.2l-10.666667-64H469.333333l-10.666666 64c-2.133333 8.533333-8.533333 17.066667-17.066667 19.2-19.2 6.4-38.4 14.933333-55.466667 27.733333-6.4 4.266667-14.933333 6.4-23.466666 2.133334l-57.6-29.866667-59.733334 59.733333 29.866667 57.6c4.266667 8.533333 2.133333 17.066667-2.133333 23.466667-12.8 17.066667-21.333333 36.266667-27.733334 55.466667-2.133333 8.533333-10.666667 14.933333-19.2 17.066666l-64 10.666667v85.333333l64 10.666667c8.533333 2.133333 17.066667 8.533333 19.2 17.066666 6.4 19.2 14.933333 38.4 27.733334 55.466667 4.266667 6.4 6.4 14.933333 2.133333 23.466667l-29.866667 57.6 59.733334 59.733333 57.6-29.866666c2.133333-2.133333 6.4-2.133333 10.666666-2.133334z" fill="#607D8B"></path>
            </svg>
          </view>
          <view class="func-content">
            <text class="func-title">设置</text>
            <text class="func-desc">修改应用设置和偏好</text>
          </view>
          <view class="func-arrow">></view>
        </view>
        
        <view class="func-item" @tap="navigateTo('/pages/mine/about')">
          <view class="func-icon">
            <svg viewBox="0 0 1024 1024" width="24" height="24">
              <path d="M509.577143 0C228.205714 0 0 228.205714 0 509.577143s228.205714 509.577143 509.577143 509.577143 509.577143-228.205714 509.577143-509.577143S790.948571 0 509.577143 0z m0 946.322286c-240.786286 0-436.772571-195.986286-436.772572-436.772572S268.790857 72.777143 509.577143 72.777143s436.772571 195.986286 436.772571 436.772571-195.986286 436.772571-436.772571 436.772572z" fill="#9C27B0"></path>
              <path d="M509.577143 290.230857c-40.137143 0-72.777143 32.64-72.777143 72.777143s32.64 72.777143 72.777143 72.777143 72.777143-32.64 72.777143-72.777143-32.64-72.777143-72.777143-72.777143zM546.011429 509.577143v-36.388572c0-19.968-16.457143-36.388571-36.388572-36.388571-19.968 0-36.388571 16.457143-36.388571 36.388571v236.580572c0 19.968 16.457143 36.388571 36.388571 36.388571 19.968 0 36.388571-16.457143 36.388572-36.388571V509.577143z" fill="#9C27B0"></path>
            </svg>
          </view>
          <view class="func-content">
            <text class="func-title">关于我们</text>
            <text class="func-desc">了解更多关于EasyWay的信息</text>
          </view>
          <view class="func-arrow">></view>
        </view>
      </view>
      
      <view class="logout-btn" @tap="logout">
        <text>退出登录</text>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/userStore';
import { usePostStore } from '@/store/postStore';
import { useFacilityStore } from '@/store/facilityStore';
import { storeToRefs } from 'pinia';

export default {
  setup() {
    const userStore = useUserStore();
    const postStore = usePostStore();
    const facilityStore = useFacilityStore();
    
    const { userInfo } = storeToRefs(userStore);
    
    return {
      userStore,
      userInfo,
      postStore,
      facilityStore
    };
  },
  
  data() {
    return {
      userInfo: {
        avatar: '/static/images/avatar.png',
        nickname: '悠然前行',
        gender: '男',
        location: '杭州市',
        bio: '让出行更轻松，让世界更无障',
        phone: '138****6666',
        email: 'user@easyway.com',
        joinDate: '2023-06-15'
      },
      postCount: 12,
      facilityCount: 28,
      likeCount: 156,
      unreadMessages: 3
    };
  },
  
  onLoad() {
    // 从缓存获取用户数据
    try {
      const userInfoStorage = uni.getStorageSync('userInfo');
      if (userInfoStorage) {
        this.userInfo = JSON.parse(userInfoStorage);
      }
      
      // 获取用户统计数据
      this.getUserStats();
    } catch (e) {
      console.error('获取用户信息失败:', e);
    }
  },
  
  methods: {
    // 编辑个人资料
    editProfile() {
      uni.showToast({
        title: '正在前往编辑页面',
        icon: 'none',
        duration: 1000
      });
      uni.navigateTo({
        url: '/pages/mine/profile-edit'
      });
    },
    
    // 页面导航
    navigateTo(url) {
      uni.navigateTo({
        url: url,
        fail: (err) => {
          console.error('导航失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 获取用户统计数据
    getUserStats() {
      // 这里可以添加请求服务器获取用户最新统计数据的逻辑
      // 现在使用模拟数据
      setTimeout(() => {
        this.postCount = Math.floor(Math.random() * 20) + 5;
        this.facilityCount = Math.floor(Math.random() * 30) + 10;
        this.likeCount = Math.floor(Math.random() * 200) + 50;
      }, 500);
    },
    
    // 刷新用户数据
    refreshUserData() {
      uni.showLoading({
        title: '刷新数据中...'
      });
      
      // 模拟刷新数据
      setTimeout(() => {
        this.getUserStats();
        uni.hideLoading();
        uni.showToast({
          title: '数据已更新',
          icon: 'success'
        });
      }, 1500);
    },
    
    // 处理下拉刷新
    onPullDownRefresh() {
      this.refreshUserData();
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 1500);
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '正在退出...'
            });
            
            // 清除用户数据
            uni.removeStorageSync('userInfo');
            uni.removeStorageSync('token');
            
            // 延迟跳转到登录页
            setTimeout(() => {
              uni.hideLoading();
              uni.reLaunch({
                url: '/pages/login/login'
              });
            }, 1500);
          }
        }
      });
    }
  }
};
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 用户卡片 */
.user-card {
  position: relative;
  margin: 30rpx;
  border-radius: 20rpx;
  background-color: #fff;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  background: linear-gradient(135deg, #3f51b5, #2196f3);
  z-index: 1;
}

/* 用户信息 */
.user-info {
  position: relative;
  padding: 40rpx 30rpx;
  display: flex;
  z-index: 2;
  height: 100%;
  width: 100%;
  background-color: #2196f3;
}

.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 75rpx;
  border: 4rpx solid #fff;
  margin-right: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}

.info-right {
  flex: 1;
  padding-top: 10rpx;
}

.nickname-row {
  display: flex;
  align-items: center;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
  margin-right: 20rpx;
}

.gender-tag {
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  color: #ffffff;
}

.location-row {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
  color: #ffffff;
}

.icon {
  margin-right: 8rpx;
}

.location {
  font-size: 26rpx;
}

.bio {
  font-size: 28rpx;
  margin-top: 16rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.edit-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 数据统计 */
.stats-row {
  display: flex;
  padding: 30rpx 0;
  background-color: #fff;
  border-top: 2rpx solid rgba(0, 0, 0, 0.05);
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-num {
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 26rpx;
  color: #666;
  margin-top: 6rpx;
}

.stat-divider {
  width: 2rpx;
  background-color: #eeeeee;
}

/* 功能模块 */
.function-list {
  padding: 0 30rpx;
}

.func-group {
  background-color: #fff;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.func-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #f5f5f5;
}

.func-item:last-child {
  border-bottom: none;
}

.func-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  background-color: #f5f5f7;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 24rpx;
}

.func-content {
  flex: 1;
}

.func-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.func-desc {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}

.func-arrow {
  color: #ccc;
  font-size: 32rpx;
}

.logout-btn {
  margin-top: 60rpx;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 45rpx;
  color: #ff3b30;
  font-size: 32rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
}
</style> 